import Vue from 'vue'
import VueRouter from 'vue-router'
import {
    Menu,
    MenuItem,
    RadioGroup,
    Radio,
    RadioButton,
    Button,
    ColorPicker,
    Input,
    InputNumber,
    Loading,
    MessageBox,
    Message,
    Icon,
    Tabs,
    TabPane,
    Notification,
    Switch
} from 'element-ui'


import addmod from './components/addmod.vue'
import modsort from './components/modsort.vue'
import chosetheme from './components/chosetheme.vue'

import Setbanner from './components/Setbanner.vue'
// import SetEventDetails from './components/SetEventDetails.vue'
// import SetTimeLocation from './components/SetTimeLocation.vue'
import TimeLocation from './components/TimeLocation.vue'
// import JsLoadMod from './components/JsLoadMod.vue'
import EventDetails from './components/EventDetails.vue'
import MyMod from './components/MyMod.vue'
import FieldMod from './components/FieldMod.vue'
import FieldEdit from './components/FieldEdit.vue'
import SetMyMod from './components/SetMyMod.vue'
import SetTools from './components/SetTools.vue'
import SetFieldmod from './components/SetFieldmod.vue'
import SetFieldEdit from './components/SetFieldEdit.vue'


import Home from './components/Home.vue'
import EventModule from './components/EventModule.vue'
import BasicModule from './components/BasicModule.vue'
import SetEventModule from './components/SetEventModule.vue'
import SetLinkMod from './components/SetLinkMod.vue'
import Sponsorcontact from './components/Sponsorcontact.vue'

// element-ui组件引入
Vue.use(VueRouter);
Vue.use(Menu);
Vue.use(MenuItem);
Vue.use(RadioGroup);
Vue.use(Radio)
Vue.use(RadioButton);
Vue.use(Button);
Vue.use(ColorPicker);
Vue.use(InputNumber);
Vue.use(Input);
Vue.use(Loading);
Vue.use(Icon);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Switch);



const routes = [{
        path: '/',
        component: Home
    },
    {
        path: '/EventDetails/:index',
        component: EventDetails
    },
    {
        path: '/TimeLocation/:index',
        component: TimeLocation
    },
    // {
    //     path: '/Tickettype/:index',
    //     component: Tickettype
    // },
    {
        path: '/Sponsorcontact',
        component: Sponsorcontact
    },
    {
        path: '/MyMod/:index',
        component: MyMod
    },
    {
        path: '/FieldMod/:index',
        component: FieldMod
    },
    {
        path: '/FieldEdit/:index',
        component: FieldEdit
    }
];

const router = new VueRouter({
    routes
})

window.vm = new Vue({
    el: '#M_TemplatePage',
    router,
    data: {
        olddata: {
            pageConfig: {},
            container: {}
        },
        nowchose: '',
        container: JSON.parse(Site.Config).container,
        pageConfig: JSON.parse(Site.Config).pageConfig,
        AModList: window.activeModList,
        BModList: window.BasicModList,
        CModList: window.CustomModule,
        Topics: window.Registers,
        FieldDatas: window.FieldDatas,
        setmod: 'chosetheme',
        setindex: -1,
        activeIndex: '1',
        terminal: JSON.parse(Site.Config).pageConfig.deviceType,
        loading: false,
        allloading: false,
        taskData: {
            "TaskId": "",
            "ActivityTitle": "",
            "StartTime": "",
            "EndTime": "",
            "CutOffTime": "",
            "Coordinate": "",
            "ActivityLocation": "",
            "ActivityCity": "",
            "AllTickets": [],
            "Summary": "",
            "APost": "",
            "Mode": 1,
            "IsEnd": false,
            "UserId": "",
            "TicketCount": 0,
            "CanManage": true,
            "Sponsor": []
        },
        taskdataloaded: false,
        deviceType: "mobile"
    },
    created: function () {
        var that = this;
        $.ajax("/Event/Manage/GetTaskData", {
            type: "post",
            contentType: "application/json",
            headers: {
                ISGZIPDATA: "0"
            },
            data: JSON.stringify({
                taskId: Parameters.taskId,
            }),
            beforeSend: function () {
                that.allloading = true;
            },
            success: function (data) {
                // console.log(data)
                data.AllTickets.forEach(function (item) {
                    if (data.AllTickets.length == 1) {
                        item.count = 0;
                    } else {
                        item.count = 0;
                    }
                });
                document.title = data.ActivityTitle;
                that.taskData = data;
                that.allloading = false;
                that.taskdataloaded = true;
            },
            error: function (err) {
                console.log(err)
            }
        });
    },
    mounted: function () {
        if (Parameters.action == 'DesignPm') {
            Notification.info({
                title: '提示',
                message: '完成模块设置后不要忘记点“保存”按钮。',
                offset: 70,
                duration: 5000
            })
        }
    },
    computed: {
        contentclass: function () {
            return {
                margr: true,
                contentbox: true
            }
        }
    },
    components: {
        addmod,
        modsort,
        Setbanner,
        // SetEventDetails,
        // SetTimeLocation,
        chosetheme,
        EventModule,
        SetEventModule,
        SetLinkMod,
        // SetSponsor,
        MyMod,
        FieldMod,
        FieldEdit,
        SetMyMod,
        SetTools,
        SetFieldmod,
        SetFieldEdit
    },
    methods: {
        onloading: function (pos, bol) {
            if (pos == "left") {
                this.loading = bol
            } else if (pos == "right") {
                this.allloading = bol
            }
        },
        interdel: function (id, i) {
            this.module[id].config.modularlist.splice(i, 1);
        },
        chosethis: function (name) {
            this.nowchose = name;
        },
        menuconhide: function () {
            this.nowchose = '';
        },
        preview: function () {
            var that = this;
            MessageBox.prompt('请输入签到码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({
                value
            }) => {
                const h = that.$createElement;
                var ewmUrl = window.location.protocol + "//" + window.location.host + "/hk/" + Parameters.taskId + "/" + value;
                var qrCodeImgSrc = "/MicroSurvey/Home/GetQrCode?enCodeUrl=" + encodeURIComponent(ewmUrl);
                MessageBox({
                    title: '预览',
                    showConfirmButton: false,
                    message: h('div', null, [
                        h('img', {
                            attrs: {
                                src: qrCodeImgSrc
                            },
                            style: {
                                margin: 'auto',
                                display: 'block',
                                width: '249px'
                            }
                        }),
                    ])
                })
            })
        },
        submit: function (num) {
            if (num == 1) {
                var that = this;
                $.ajax("/Template/Design/UpdateSite", {
                    type: "post",
                    contentType: "application/json",
                    headers: {
                        ISGZIPDATA: "0"
                    },
                    data: JSON.stringify({
                        siteId: Parameters.siteId,
                        config: JSON.stringify({
                            pageConfig: that.pageConfig,
                            container: that.container
                        })
                    }),
                    beforeSend: function () {
                        that.loading = true;
                    },
                    success: function (data) {
                        that.loading = false;
                        if ((that.setmod != 'modsort') && (that.setmod != 'chosetheme')) {
                            that.setmod = 'addmod';
                        }
                    },
                    error: function (err) {
                        that.loading = false;
                        console.log(err)
                    }
                });
            } else {
                this.pageConfig = this.deepCopy(this.olddata.pageConfig);
                this.container = this.deepCopy(this.olddata.container);
                this.setmod = 'addmod';
            }

        },
        deepCopy: function (p, c) {
            var c = c || {};
            for (var i in p) {
                if (typeof p[i] === 'object' && p[i] !== null) {
                    c[i] = (p[i].constructor === Array) ? [] : {};
                    this.deepCopy(p[i], c[i]);
                } else {
                    c[i] = p[i];
                }
            }
            return c;
        },
        delmod: function (i) {
            var that = this;
            MessageBox.confirm('此操作将删除该模块, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.container.items.splice(i, 1);
                that.allloading = true;
                $.ajax("/Template/Design/UpdateSite", {
                    type: "post",
                    contentType: "application/json",
                    headers: {
                        ISGZIPDATA: "0"
                    },
                    data: JSON.stringify({
                        siteId: Parameters.siteId,
                        config: JSON.stringify({
                            pageConfig: that.pageConfig,
                            container: that.container
                        })
                    }),
                    beforeSend: function () {
                        that.allloading = true;
                    },
                    success: function (data) {
                        that.allloading = false;
                        if ((that.setmod != 'modsort') && (that.setmod != 'chosetheme')) {
                            that.setmod = 'addmod';
                        }
                        Message({
                            type: 'success',
                            message: '删除成功!',
                            duration: 2000
                        });
                    },
                    error: function (err) {
                        that.loading = false;
                        Message({
                            type: 'error',
                            message: '出错了!删除失败',
                            duration: 2000
                        });
                    }
                });
            }).catch(() => {
                Message({
                    type: 'info',
                    message: '已取消删除',
                    duration: 2000
                });
            })
        },
        handleSelect: function (index) {
            if (index == 2) {
                this.setmod = "addmod";
            } else if (index == 3) {
                this.setmod = "modsort";
            } else if (index == 1) {
                this.setmod = "chosetheme"
            }
        },
        showsetbox: function (id, i, type) {
            this.olddata.pageConfig = this.deepCopy(this.pageConfig);
            this.olddata.container = this.deepCopy(this.container);
            if (type == "EventModule" || type == "CustomModule") {
                if (id != "Tools" && id != "Fieldmod" && id != "FieldEdit") {
                    this.setmod = "SetEventModule";
                } else {
                    this.setmod = "Set" + id;
                }
                this.setindex = i;
            } else if (type == "BasicModule") {
                this.setmod = "Set" + id;
                this.setindex = i;
            }

        },
        addmod: function (id, index, type) {
            if (type == "EventModule") {
                for (var i = 0; i < this.container.items.length; i++) {
                    if (this.container.items[i].id == id) {
                        return false
                    }
                }
                this.olddata.pageConfig = this.deepCopy(this.pageConfig);
                this.olddata.container = this.deepCopy(this.container);
                this.container.items.push(this.AModList[index]);
                this.setmod = "SetEventModule";
                this.setindex = this.container.items.length - 1;
            } else if (type == "BasicModule") {
                this.olddata.pageConfig = this.deepCopy(this.pageConfig);
                this.olddata.container = this.deepCopy(this.container);
                let newitem = this.deepCopy(this.BModList[index])
                this.container.items.push(newitem);
                this.setmod = "Set" + id;
                this.setindex = this.container.items.length - 1;
            } else if (type == "CustomModule") {
                if (id != "Tools" && id != "Fieldmod" && id != "FieldEdit") {
                    for (var i = 0; i < this.container.items.length; i++) {
                        if (this.container.items[i].id == id) {
                            return false
                        }
                    }
                    this.olddata.pageConfig = this.deepCopy(this.pageConfig);
                    this.olddata.container = this.deepCopy(this.container);
                    this.container.items.push(this.CModList[index]);
                    this.setmod = "SetEventModule";
                    this.setindex = this.container.items.length - 1;
                } else {
                    this.olddata.pageConfig = this.deepCopy(this.pageConfig);
                    this.olddata.container = this.deepCopy(this.container);
                    let newitem = this.deepCopy(this.CModList[index])
                    this.container.items.push(newitem);
                    this.setmod = "Set" + id;
                    this.setindex = this.container.items.length - 1;
                }

            }
            return false
        },
        changeDevice: function (value) {
            if (value == "pc") {
                window.location.href = '/Template/Design/Udp?siteId=' + this.taskData.SiteAddress + '&taskId=' + this.taskData.TaskId
            }
        }
    }
})